<template>
	<view :style="{ '--color': color }">
		<status-bar title="全部订单"></status-bar>
		<view class="Wrapper">
			<view class="row j-sb a-center">
				<text class="black size30 bold">订单/流水</text>
				<view class="d-flex a-center" @click="show = true">
					<text class="color_333 size28">{{ monthData }}</text>
					<view class="iconfont icon-xiangxia1 color_333 size30 p-left10 bold"></view>
				</view>
			</view>

			<view class="info">
				<view class="list">
					<text class="size36 color_333">{{ thisM.teamOrderNum }}</text>
					<text class="size28 color_333 m-top4"> 当月单量</text>
				</view>
				<view class="list">
					<text class="size36 color_333">{{ thisM.teamOrderMoney }}</text>
					<text class="size28 color_333 m-top4"> 当月业绩</text>
				</view>
				<view class="list">
					<text class="size36 color_333">{{ thisM.teamIncome }}</text>
					<text class="size28 color_333 m-top4"> 当月收益</text>
				</view>
			</view>

			<view class="modeul">
				<view class="list" :class="{ Active: team == 1 }" @click="changelist(1)">
					<text class="size30 bold">A区</text>
					<view class="row j-sb a-center m-top10">
						<text class="color_33 h6">{{ thisM.team1OrderNum }}(笔)</text>
						<text class="color_33 h6">{{ thisM.team1OrderMoney }}(元)</text>
					</view>
				</view>
				<view class="list" :class="{ Active: team == 2 }" @click="changelist(2)">
					<text class="size30 bold">B区</text>
					<view class="row j-sb a-center m-top10">
						<text class="color_33 h6">{{ thisM.team2OrderNum }}(笔)</text>
						<text class="color_33 h6">{{ thisM.team2OrderMoney }}(元)</text>
					</view>
				</view>
			</view>

			<view class="chanList" v-for="(item, index) in pageData" :key="index">
				<view class="qubue" v-if="item.team">{{ item.team }}</view>
				<view class="enBox">
					<text class="orderTxt">订单号：{{ item.order_code }}</text>
					<view
						class="d-flex a-center m-bot10"
						v-if="item.v_headimg || item.v_name || item.v_tel">
						<image
							:src="$imgUrls(item.v_headimg)"
							mode="aspectFill"
							class="v_headimg"
							v-if="item.v_headimg"></image>
						<view class="v_name">
							<text class="color_33 size28 ellipsis">{{ item.v_name }}</text>
						</view>
						<text class="color_33 size28">({{ item.v_tel }})</text>
					</view>
					<text class="orderTxt">金额：￥{{ item.payment }}</text>
					<text class="orderTxt">下单时间：{{ item.add_date }}</text>
				</view>
				<view class="earnings">
					<text class="color h6">收益</text>
					<text class="color size30">{{ item.income }}</text>
				</view>
			</view>
			<view class="p-top100 p-bot100" v-if="!pageData.length">
				<u-empty mode="list" text="暂无相关内容"></u-empty>
			</view>
		</view>

		<u-datetime-picker
			:show="show"
			ref="datetimePicker"
			v-model="value1"
			:formatter="formatter"
			:maxDate="maxDate"
			@cancel="show = false"
			@confirm="confirm"
			mode="year-month"></u-datetime-picker>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				maxDate: Number(new Date()),
				monthData: '',
				team: 0,
				page: 1,
				limit: 10,

				getMore: true,
				pageData: [],
				thisM: '',
			};
		},

		onShow() {
			this.monthData = this.$pop.tampToDate(new Date());
			this.OrderList();
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter);
		},
		methods: {
			OrderList() {
				this.$http
					.post({
						url: '/trdxcxApi/getTeamOrderList',
						data: {
							scanDate: this.monthData + '-01',
							page: this.page,
							limit: this.limit,
							team: this.team,
						},
					})
					.then((res) => {
						if (res.errcode != 100) return this.$Toast(res.msg);
						if (res.thisM) this.thisM = res.thisM;
						const result = res.data || [];
						this.page == 1
							? (this.pageData = result)
							: (this.pageData = [...this.pageData, ...result]);
						if (result.length < this.limit) return (this.getMore = false);
					});
			},

			changelist(num) {
				num == this.team ? (this.team = 0) : (this.team = num);
				this.page = 1;
				this.getMore = true;
				this.OrderList();
			},
			confirm(e) {
				const result = this.$pop.tampToDate(e.value);
				this.value1 = e.value;
				this.monthData = result;
				this.show = false;
				this.page = 1;
				this.getMore = true;
				this.OrderList();
			},

			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				return value;
			},
		},

		computed: {
			...mapState(['color']),
		},
		onReachBottom() {
			if (!this.getMore) return;
			this.page++;
			this.OrderList();
		},
	};
</script>

<style lang="scss">
	page {
		background-color: $page;
		padding-bottom: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.Wrapper {
		width: 690rpx;
		margin: 24rpx auto 0;
		box-sizing: border-box;
		.info {
			width: 100%;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 24rpx;
			border-radius: 10rpx;
			margin-top: 20rpx;
			.list {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.modeul {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			.list {
				width: 333rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				border: 1px solid #fff;
			}
			.Active {
				border: 1px solid var(--color);
			}
		}
		.chanList {
			width: 690rpx;
			margin: 24rpx auto 0;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 24rpx;
			position: relative;
			display: flex;
			align-items: center;
			overflow: hidden;
			box-sizing: border-box;
			.qubue {
				color: #000;
				font-size: 28rpx;
				font-weight: bold;
				position: absolute;
				top: 10rpx;
				right: 24rpx;
			}
			.enBox {
				flex: 1;
				display: flex;
				flex-direction: column;
				.orderTxt {
					color: #333;
					font-size: 28rpx;
					line-height: 50rpx;
				}
				.v_headimg {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
				.v_name {
					max-width: 220rpx;
				}
			}
			.earnings {
				display: flex;
				flex-direction: column;
				text-align: right;
				align-self: flex-end;
			}
		}
	}
</style>
